<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学员信息表</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

	<style>
		.dv{
			text-align: center;
			margin-top: -20px;
			padding-top: 70px;
			padding-bottom: 50px;
		}
		.dv p{
			font-size:20px;
		}
		.container{
			margin-top: 20px;
		}
		input,select,button{
			width: 260px;
			height: 45px;
		}
		button{
			background-color: blue;
			border:1px solid blue;
			border-radius: 5px;
			color: #fff;
		}
		.list{
			padding-top:80px;
		}
		#list li{
			padding-top: 15px;
			padding-bottom: 15px;
			border-bottom: 1px solid #000000;
		}
		#list li span{
			display: inline-block;
			width: 33%;
			/*padding-left: 15px;*/
			color: #000;
		}
		#list li:first-child span{
			font-weight: 600;
		}
		ul{
			margin-left: -20px;
		}
		ul li{
			list-style: none;
		}
	</style>
</head>
<body>
	
	<div class="jumbotron jumbotron-fluid">
		<div class="dv">
			<h1>学员信息表</h1>
			<p>1803</p>
		</div>
	</div>

	<div class="container">
		<h2>添加</h2>
				<input type="text" id="n" placeholder="姓名">
				<select name="" id="s">
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
				<input type="number" id="a" placeholder="年龄">
				<button id="btn">添加</button>
	
	</div>
	<div class="container">
		<div class="list">
		<h2>列表</h2>
		<hr>
		<ul id="list">
			<li>
				<span>姓名</span>
				<span>性别</span>
				<span>年龄</span>
			</li>
		</ul>
	</div>
	</div>

	<script>
function bene() {
	var xmlhttpr;
	xmlhttpr = new XMLHttpRequest();
	xmlhttpr.onreadystatechange = function() {
		if(xmlhttpr.readyState == 4 && xmlhttpr.status == 200) {
			var json = JSON.parse(xmlhttpr.responseText)
			for(var i = 0; i < json.data.length; i++) {

				var li = document.createElement('li');
				var span = document.createElement('span');
				span.innerHTML = json.data[i].studentName;
				var span1 = document.createElement('span');
				span1.innerHTML = json.data[i].sex;
				var span2 = document.createElement('span');
				span2.innerHTML = json.data[i].age;

				li.appendChild(span);
				li.appendChild(span1);
				li.appendChild(span2);

				//ul
				document.querySelector('#list').appendChild(li);
			}
		}
	}
	xmlhttpr.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/student", true);
	xmlhttpr.send();
}

bene();


	document.querySelector("#btn").addEventListener('click',function(){

		// 获取姓名
		var n = document.querySelector("#n").value;
		// console.log(n);

		// 获取性别
		var s = document.querySelector("#s").value;
		// console.log(s);

		// 获取年龄
		var a = document.querySelector("#a").value;
		// console.log(a);

		// ajax代码

		var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			// document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
			console.log(xmlhttp.responseText);
		}
	}
	xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName="+n+"&sex="+s+"&age="+a,true);
	xmlhttp.send();
	})
	</script>
</body>
</html>